<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <script src="/public/admin/js/jquery.min.js?v=2.1.4"></script>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        height: 450px;
        background: #040c31;
    }
    #myDiv{
        display: inline-flex;
    }
    #myDiv img{
        height: 810px;
        width: 100%;
    }
      .timeline-dots-wrap {
          width: 100%;
          height: 30px;
          overflow: hidden;
      }
    .timeline-dots {
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        height: 100%;
        background: url("/public/speed/icon/timeline-bg.png") bottom repeat-x;
        transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    .timeline-dots li {
        float: left;
        width: 100px;
        transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        list-style: none;
        text-align: center;
        overflow: hidden;
    }
    .timeline-dots li.slide-active button {
        color: #2972ca;
        font-size: 10px;
    }
    .timeline-dots button {
        cursor: pointer;
        border: none;
        outline: none;
        color: #ffffff;
        font-size: 10px;
        padding-bottom: 15px;
        background: url("/public/speed/icon/date-icon.png") bottom no-repeat;
        transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    .line{
        height:820px;
        width: 1px;
        background: green;
        position: absolute;
        top:-20px;
        left: 0;
        z-index: 100;
    }
    .data_show{
        position: absolute;
        top: 50%;
        width: 50px;
        color: red;
        font-size: 10px;
        left: 15px;
    }
    #line{
        background: orange;
    }
    .data_code {
        position: absolute;
        width: 10px;
        background: red;
        color: white;
        left: 0;
        font-size: 10px;
    }
    .timeline-dots-wrap{
        position: fixed;
        top: 20px;
    }
</style>
<body onmousemove="showScreen(event)">
<div class="timeline-dots-wrap bottom">
    <ul class="timeline-dots" id="kedu" >
    </ul>
</div>
<div id="line" class="line"><span class="data_show">0</span></div>
<div id="lineList">
</div>
<div id="myDiv">
</div>

</body>
<script src="/public/speed/js/html2canvas.min.js"></script>
<script src="/public/speed/js/FileSaver.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    });

    var arr ='';//时间戳数组
    var leng = 30000;
    $('#myDiv').css('width',leng+'px');
    $('body').css('width',leng+'px');
    $('.timeline-dots-wrap').css('width',leng+'px');
    var locker = 0;
    var interval = setInterval(function () {
        locker = parent.document.getElementById("locker").value;
        var jpg = parent.document.getElementById("jpg").value;
        if (locker == 1){
        }else {
            getImg();
        }
        if (jpg == 1) {
            convert();
            var ret = {
                'jpg':1
            };
            window.parent.postMessage(ret,'*')
        }
    },1000);
    function convert() {
        html2canvas(document.body).then(canvas => {
            canvas.toBlob(function(blob) {
                saveAs(blob, "hangge.png");
            });
        });
    }
    var txt =[];
    var time = 0;
    var activity_id = 0;
    function getImg(){
        var type= parent.document.getElementById("fang").value;
        activity_id= parent.document.getElementById("activity_id").value;
        $.ajax({
            type : "get",
            url : './getImg_new?type='+type+'&activity_id='+activity_id,
            dataType : "JSON",
            async: true,
            success : function(data){
                arr = data.arr;
                var leng = data.txt.length;
                var img = '';
                if (type == 1){
                    for (var i in arr) {
                        img += `<img src="/public/speed/result/${arr[i]}">`
                    }
                    if (time != arr.length){
                        $("html").scrollLeft(0);
                        time = arr.length;
                    }
                }else{
                    for (var i in arr) {
                        img += `<img src="/public/speed/result/${arr[i]}" style="transform: rotateY(180deg)">`
                    }
                    if (time != arr.length){
                        $("html").scrollLeft(leng);
                        time = arr.length;
                    }
                }
                $('#myDiv').html(img);
                $('#myDiv').css('width',leng+'px');
                $('body').css('width',leng+'px');
                txt = data.txt;
                kedu(txt);
                $('.timeline-dots-wrap').css('width',leng+'px');

            },

        });
    }
    function kedu(txt){
        var len = txt.length;
        var result = '';
        for(var i=50;i<len;i+=100) {
            var t = time2sec(txt[i]);
            result+=`<li class="">
                        <button type="button" role="button">${t}</button>
                    </li>`;
        }
        $('#kedu').html(result);
    }
    var iframe_time = 0;
    var left = 0;
    var data = 0;
    function showScreen(event) {
        left = event.clientX+document.documentElement.scrollLeft;
        $('#line').css('left',left);
        $('#line').css('display','block');
        iframe_time = txt[left];
        if(iframe_time != null){
            data = time2sec(iframe_time);
        }
        $('#line span').text(data);
    }
    var lineArr=[];
    //赛道成绩分配
    $(document).keydown(function(event){
        var code = event.keyCode;
        if (code>48&&code<58){
            var p = code -48;
            var ret = {
                'time':iframe_time,
                'code':p,
                'jpg':0
            };
            console.log(lineArr);
            if (activity_id != 0){
                var code = p*8;
                var rand =code+4;
                var line = "line"+p;
                var da = "da"+p;
                var result =`<div class="line ${line}"  style="left:${left}px">
                                <span class="data_code" style="top:${code}%">${p}</span>
                                <span class="data_show ${da}" style="top:${code}%">${data}</span>
                            </div>`;
                if (lineArr.includes(p)){
                    $(`.${line}`).css('left',left+'px');
                    $(`.${da}`).text(data);
                } else{
                    lineArr.push(p);
                    $('#lineList').append(result);
                }
            }
            window.parent.postMessage(ret,'*')
        }
    });
    function time2sec(str){
        var disLength = str.length;
        var real = str.substring(0,disLength-1);
        var end = str.substring(disLength,disLength-1);
        var a=real%1000;
        var b=real%60000/1000;
        var mill=(a<100)?('0'+Math.floor(a)):(Math.floor(a));
        var sec=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
        return sec+'.'+mill+end;
    }

</script>
</html>
